﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$pro.title}</title>
<meta name="keywords" content="{$pro.keywords}" />
<meta name="description" content="{$pro.abstract}" />
<link rel="stylesheet" href="Home/webroot/default/images/style.css" />
<link rel="stylesheet" href="Home/webroot/default/images/info.css" />
<link rel="stylesheet" href="Home/webroot/default/images/jqzoom.css" />
<SCRIPT src="Home/webroot/default/js/jquery-1.3.2.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="Home/webroot/default/js/jqzoom.pack.1.0.1.js" type=text/javascript></SCRIPT>
<SCRIPT src="Home/webroot/default/js/ddsmoothmenu.js" type=text/javascript></SCRIPT>
<script src="Home/webroot/default/js/yu.js" type="text/javascript"></script>
<script src="Home/webroot/default/js/tb.js" type="text/javascript"></script>
<script src="Home/webroot/default/js/MSClass.js" type="text/javascript"></script>

<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('.lefts img,.rights img');
</script> 
<![endif]-->
<script type="text/javascript">
$(function() {
	$(".jqzoom").jqzoom();
});
</script>
</head>
<body>

{include file='../Common/header.html'}
<!-- header -->

<div id="info">
        <div class="w690 pt34">
            <div class="small"><a href="{$pro.original_pic}" class="jqzoom"><img id="goods_img" src="{$pro.middle_pic}"  width="286" height="286"></a></div>
            
            <div class="rt-information">
                <h3>{$pro.title}</h3>
                <div class="ctit b"></div>
                <div class="cli">
                产品尺寸：{$pro.size}<br>
                产品型号：{$pro.model}<br>
              
                </div>
				<!-- 
                <div class="b">
                    <div class="buy"><a href="#" target="_blank" title="在线商城购买"></a></div>
                </div>
				-->
            </div>
            <div style="clear:both"></div>
            <div class="gallery_contain">
                <a href="javascript:;" class="spec-control disabled" id="spec-forward"></a>
                <a href="javascript:;" class="spec-control disabled" id="spec-backward"></a>
                 <div class="gallery">
                  <ul>
              {foreach from=$pro.gallery item=img}
               <li><a href="javascript:void(0)" onmouseover="show_this('{$img.middle_pic}','{$img.original_pic}')" target="_blank"><img src="{$img.small_pic}" /></a><li>
               
              {/foreach}
                  </ul>
              </div>
            </div>
        </div>
        <div class="w690 tit690">
            <h4>详细信息</h4>
        </div>
        <div class="w690 details">
            {$pro.content}
        </div>
</div>
<script>
function show_this(img_url,big_img){
	var goods_img= document.getElementById('goods_img');
	goods_img.setAttribute('src',img_url);
	goods_img.parentNode.setAttribute('href',big_img);
	}
	
	$(function(){
		
		var ul_width=parseInt($('.gallery').css('width'));
		var span_width=parseInt($('.gallery_contain').css('width'));
		
		var max_len=span_width-ul_width;
		$('#spec-backward').click(function(){
			
			var ul_left=$('.gallery').css('left');
		
			if(parseInt(ul_left)>max_len&&max_len<0)
			{
			$('.gallery').css('left',parseInt(ul_left)-61);
			}
			change_button();
			}
		
		);
		
		$('#spec-forward').click(function(){
			var ul_left=$('.gallery').css('left');
			
			if(parseInt(ul_left)<0&&max_len<0)
			{
			$('.gallery').css('left',parseInt(ul_left)+61);
			 
			}
			change_button();
			
			
			}
		
		);
		
		
		function change_button()
		{
			
			var ul_left=$('.gallery').css('left');
			if(parseInt(ul_left)<=max_len)
			{
				
				$('#spec-backward img').attr('src','themes/default/images/xiang_6.jpg');
				$('#spec-forward img').attr('src','themes/default/images/xiang_1.jpg');
			}
			else if(parseInt(ul_left)>=0)
			{
				$('#spec-backward img').attr('src','themes/default/images/xiang_1.jpg');
				$('#spec-forward img').attr('src','themes/default/images/xiang_6.jpg');
			}
			else
			{
				$('#spec-backward img').attr('src','themes/default/images/xiang_6.jpg');
				$('#spec-forward img').attr('src','themes/default/images/xiang_6.jpg');
			}
		}
		})
</script>
<!-- footer -->
{include file='../Common/footer.html'}
</body>
</html>
